<template>
  <div>
    <NavSideBar :navItems="getnavItems"></NavSideBar>
  </div>
</template>

<script>
import {computed} from 'vue'
import {useRouter} from 'vue-router'

import NavSideBar from '@/components/content/navSideBar/NavSideBar'

export default {
  name: 'MainSideBar',
  components: {
    NavSideBar
  },
  setup() {
    let navItems = []

    function getAllNavItemsFromRouter(){
      let router = useRouter()
      if (router && router.options && router.options.routes) {
        router.options.routes.forEach(item => {
          if (item.title) {
            navItems.push(item)
          }
        });
      }
    }

    const getnavItems = computed(()=>{
      console.log('get nav items')
      if (navItems.length === 0){
        getAllNavItemsFromRouter()
      }
      return navItems
    })

    return {getnavItems}
  },
}
</script>